import React from 'react';
import { Link } from 'react-router';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
// import Pagination from 'rc-pagination';
import classNames from 'classnames';
import testPackageAction from '../../actions/testPackageAction.js';
import Widget from '../mui/Widget.js';
import server from '../../actions/serverActions.js'; // 这是测试公用server
import SearchInput from '../mui/searchInput.js';
import Pagination from 'react-ccui-pagination';

require('./test.scss')

const TestPackageList = React.createClass({
  render() {
    const { List } = this.props;
    return (
      <tbody>
      {
        List && List.map((item, index) =>
          <tr key={index}>
            <td>{item.created}</td>
            <td>{item.name}</td>
            <td>{item.size}M</td>
            <td>
              <p>从{item.low}</p>
              <p>到{item.high}</p>
            </td>
            <td className="text-left"><p className="package-finger">{item.finger}</p></td>
            <td className="text-left"><pre className="pre-remark">{item.remark}</pre></td>
            <td><Link to={`/testPackage/edit/${item._id}`} activeClassName="active">编辑</Link></td>
          </tr>
        )
      }
      </tbody>
    );
  }
});

const TestPackage = React.createClass({
  getInitialState() {
    return {
      pageList: [],
      arr: [1,2,3,4,5],
      show: false
    };
  },
  componentDidMount() {
    const data = {
      keyword: '',
      page: 1,
      page_size: 15
    };
    const { fetchTestPackage } = this.props;
    fetchTestPackage(data);
    // this.arr = [1,2,3,4,5]
    console.log('this.testModel',this.testModel.scrollHeight)

  },
  componentWillReceiveProps(nextProps) {
    this.setState({ pageList: nextProps.testPackageList.data });
  },
  search(target) {
    this.searchValue = target.value;
    const data = {
      keyword: target.value,
      page_size: 15
    };
    const { fetchTestPackage } = this.props;
    fetchTestPackage(data);
  },
  pagination(pageNumber) {
    const data = {
      page: pageNumber,
      keyword: this.searchValue,
      page_size: 15
    };
    const { fetchTestPackage } = this.props;
    fetchTestPackage(data);
  },
  test(){
    // console.log(this.model.style.height = '100px')
    // this.model.style.height = '100px'
    // console.log('this.testModel',this.testModel.scrollHeight)
    if (this.model.style.overflow === 'hidden') {
      return;
    }
    if (this.model.style.display === 'none') {
      this.model.style.overflow="hidden"
      this.model.style.height="0px"
      this.model.style.display="block"
      // this.model.style.height = this.model.scrollHeight + 'px'
      // this.setState({show: !this.state.show})
      const chiden = this.model.scrollHeight

      let a = 0
      const timer = setInterval(() => {
        a = a+1
        this.model.style.height = `${a}px`
        if (a >= parseInt(chiden)) {
          clearInterval(timer)
          this.model.style.height = ''
          this.model.style.overflow = ''
        }
      }, 1)
    } else {
      this.model.style.overflow="hidden"
      let b = this.model.scrollHeight;
      const timer = setInterval(() => {
        b = b-1
        this.model.style.height = `${b}px`
        if (b <= 0) {
          clearInterval(timer)
          this.model.style.height = ''
          this.model.style.overflow = ''
          this.model.style.display = 'none'
        }
      }, 1)
    }
  },
  render() {
    const pages = this.props.testPackageList.pages * 10 || 0;
    const page = this.props.testPackageList.page;
    const {show} = this.state
    return (
      <div>
        <Widget widgetHeader={'测试包侯选池'} />
        <div className="widget-body">
          <div className="mw400">
            <Link to="/testPackage/new" className="btn btn-primary w160">上传测试包</Link>
            <div className="pull-right">
              <SearchInput placeholder={"包命名"} onSearch={this.search} />
            </div>
          </div>
          <div className="test" ref={(ref) => { this.testModel = ref; }}>
            <span onClick={this.test}>点击</span>

            <ul ref={(ref) => { this.model = ref; }}  style={{display: 'none'}}>
              {
                this.state.arr.map((item,index) => 
                  <li key={index}>{item}dsfs</li>
                )
              }
            </ul>


          </div>
          <Pagination
            currentPage={1}   // 当前页码，默认为 1
            range={10}         // 显示的页码按钮数量， 默认为 10
            totalPages={50}         // 总条目数，默认为 0
            // onChange={function(page)}
          />
          <div>
            <table className="table table-hover table-90">
              <thead>
                <tr>
                  <th className="m-w170">上传时间</th>
                  <th className="m-w133">包命名</th>
                  <th className="m-w100">包大小</th>
                  <th className="m-w133">外部版本号区间</th>
                  <th className="m-w170">指纹</th>
                  <th className="max-w200 mw220">备注</th>
                  <th className="m-w80">操作</th>
                </tr>
              </thead>
              <TestPackageList List={this.state.pageList} />
            </table>
          </div>
          <div className="mt50 mb100">
            <Pagination className="ant-pagination" current={page} defaultCurrent={1} total={pages} onChange={this.pagination} />
          </div>
        </div>
      </div>
    );
  }
});

const mapStateToProps = function (state) {
  return {
    testPackageList: state.testPackage.testPackageList,
  };
};
// const mapDispatchToProps = function (dispathch) {
//   const obj = Object.assign({}, server, testPackageAction);
//   return bindActionCreators(obj, dispathch);
// };
// // export default TestPackage
// module.exports = connect(mapStateToProps, mapDispatchToProps)(TestPackage);
module.exports = connect(mapStateToProps, testPackageAction)(TestPackage);
